<template>
  <div>
    <div class="search clear">
      <div class="fixed_nav">
        <mt-navbar v-model="selected">
          <mt-tab-item id="1" @click.native="navChange">推荐</mt-tab-item>
          <mt-tab-item v-for="newsCate in getNewsCate" :id="newsCate._id" @click.native="navChange">{{newsCate.title}}</mt-tab-item>
        </mt-navbar>
        <input type="text" placeholder="搜索" class="left" v-model="value">
        <button class="right" @click="search">查找</button>
      </div>
    </div>

    <div class="newsContent" v-for="news in getNewsList">
        <img :src="`http://127.0.0.1:3000/${news.thumb[0].filename}`" width="100%" v-if="news.thumb"/>
        <h3>{{news.title}}</h3>
        <p>{{news.content}}</p>
        <div class="clear"><span class="left">发布时间：{{setTime(news.data)}}</span><span class="right">评论数：(<b>{{news.comNum}}</b>)</span></div>
    </div>
  </div>
</template>

<script>
    import {mapGetters} from "vuex";
    import {mapActions} from "vuex";
    import {formatDateTime} from '../date';

    export default{
        data(){
          return{
            selected:"1",
            value:"",
          }
        },
        methods:{
            ...mapActions(["setNewsCate","setFilter","setNewsList"]),
            setTime(date){
              return formatDateTime(date)
            },
            navChange(){
              if(this.selected!="1"){
                this.setFilter({
                  _id:this.selected,
                })
              }else{
                this.setFilter({
                  rows: 10,
                  page: 1,
                  total: 0,
                })
              }
              this.setNewsList(this.getFilterNews)
            },
            search(){
                this.setFilter({
                  title:this.value,
                })
                this.setNewsList(this.getFilterNews)
            }
        },
        computed:{
          ...mapGetters(["getNewsCate",,"getFilterNews","getNewsList"])
        },
        created(){
          this.setNewsCate(0);
          this.setNewsList(this.getFilterNews)
        },
    }
</script>

<style >
  .mint-navbar{
    white-space: nowrap;
    overflow: auto;
    background: 	#F5F5F5;
  }
  .mint-navbar .mint-tab-item{
    margin-right:0.6rem;
    margin-left:0.6rem;
  }
  .mint-tab-item>.mint-tab-item-label{
    font-size: 1.2rem
  }
  .mint-navbar .mint-tab-item.is-selected{
    color:red;
  }
  .search{
    position: relative;
    width: 100%;
    height: 6rem;
    z-index: 100;
  }
  .fixed_nav{
    position: fixed;
    width: 100%;
  }
  .search input{
    width:80%;
    border: 0;
    /* background:red; */
    height: 2.5rem;
    font-size: 1.1rem;
    border:5px solid #D3D3D3;
    border-right:0;
    box-sizing: border-box;
    outline: none;
  }
  .search button{
    width:20%;
    border: 0;
    /* background:red; */
    height: 2.5rem;
    font-size: 1.1rem;
    text-align: center;
    border:5px solid #D3D3D3;
    box-sizing: border-box;
    outline: none;
  }
  .newsContent{
    padding: 0.8rem;
    background: white;
    border-bottom: 1px dashed #ccc;
    margin-bottom:1rem;
  }
  .newsContent>h3{
    font-size: 1.4rem;
  }
  .newsContent>p{
    width:100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.4rem;
    margin:0.3rem 0 0.5rem;
    background:white
  }
  .newsContent b{
    color:	#FFA500
  }
</style>

